<template>
  <div class="right" v-if="$parent.selectedIndex<0">
    <div class="tip">
      选中设计区的表单元素
      <br />此处将呈现表单元素属性
    </div>
  </div>
  <div v-else class="right">
    <a-divider class="divider">基础属性</a-divider>
    <div v-if="field.label" class="formItem">
      <div>表单域名称：</div>
      <div>
        <a-input v-model="field.label" placeholder="请输入表单域名称" />
      </div>
    </div>
    <div v-if="field.props.placeholder" class="formItem">
      <div>表单域提示文本：</div>
      <div>
        <a-input v-model="field.props.placeholder" placeholder="请输入表单域提示文本" />
      </div>
    </div>
    <div v-if="field.props.disabled != undefined" class="formItem">
      <div>是否禁用：</div>
      <div>
        <a-radio-group v-model="field.props.disabled">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </div>
    </div>
    <div v-if="field.props.value != undefined" class="formItem">
      <div>表单域默认值：</div>
      <div v-if="field.code == 'a-checkbox-group'">
        <a-input v-model="checkBoxValue" placeholder="多个值用$符号分隔" />
      </div>
      <div v-else-if="field.code == 'a-date-picker'">
        <a-date-picker
          style="width:172px"
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择默认时间"
          v-model="field.props.value"
        />
      </div>
      <div v-else>
        <a-input v-model="field.props.value" placeholder="请输入表单域默认值" />
      </div>
    </div>
    <div v-if="field.props.orientation != undefined" class="formItem">
      <div>分割线文本所在位置：</div>
      <div>
        <a-radio-group v-model="field.props.orientation">
          <a-radio value="left">左</a-radio>
          <a-radio value="right">右</a-radio>
        </a-radio-group>
      </div>
    </div>
    <div v-if="field.children && typeof field.children[0] == 'string'" class="formItem">
      <div>表单域内容：</div>
      <div>
        <a-input v-model="field.children[0]" placeholder="请输入表单域内容" />
      </div>
    </div>
    <div v-if="field.children && typeof field.children[0] == 'object'" class="formItem">
      <div class="formLabelBar">
        <div class="formLabel">表单域子项：</div>
        <a-tooltip placement="left">
          <template slot="title">增加表单域子项</template>
          <div @click="addSubItem" class="formLabelBtn">
            <a-icon type="plus-square" />
          </div>
        </a-tooltip>
      </div>
      <div :key="index" v-for="(item,index) in field.children" class="childField">
        <div class="childLabel">键：</div>
        <div class="childFieldInput">
          <a-input size="small" v-model="item.children[0]" placeholder="请输入键" />
        </div>
        <div class="childLabel">值：</div>
        <div class="childFieldInput">
          <a-input size="small" v-model="item.props.value" placeholder="请输入值" />
        </div>
        <a-tooltip placement="left">
          <template slot="title">删除表单域子项</template>
          <div @click="delSubItem(index)" class="formLabelBtn">
            <a-icon type="minus-square" />
          </div>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {};
  },
  methods: {
    addSubItem() {
      let lastIndex = this.field.children.length - 1;
      let obj = {
        ...this.field.children[lastIndex]
      };
      this.field.children.splice(lastIndex, 0, obj);
    },
    delSubItem(index) {
      if (this.field.children.length <= 1) {
        this.$message.error("不能把子项全部删除");
        return;
      }
      this.field.children.splice(index, 1);
    }
  },
  computed: {
    field() {
      if (this.$parent.selectedIndex < 0) return;
      return this.$parent.items[this.$parent.selectedIndex];
    },
    checkBoxValue: {
      get() {
        return this.field.props.value.join("$");
      },
      set(newValue) {
        this.field.props.value = newValue.split("$");
      }
    },
    datePickerValue: {
      get() {
        return moment();
      },
      set(newValue) {
        this.field.props.value = moment(this.field.props.value);
      }
    },
    cardValue: {
      get() {
        return this.field.children[0];
      },
      set(newValue) {
        this.$set(this.field.children, 0, newValue);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.right {
  box-shadow: -2px 2px 4px 0 rgba(34, 34, 34, 0.1);
  height: 100%;
  overflow-y: auto;
  width: 286px;
  .tip {
    color: #e6e6e6;
    font-size: 22px;
    padding-top: 156px;
    padding-bottom: 156px;
    text-align: center;
    font-weight: bold;
    line-height: 38px;
  }
  .divider {
    color: #888;
    font-size: 13px;
  }
  .formItem {
    padding: 2px 18px 2px 18px;
    div {
      line-height: 36px;
    }

    .formLabelBtn {
      width: 28px;
      text-align: center;
      cursor: pointer;
    }
    .formLabelBtn:hover {
      color: #1890ff;
    }
    .formLabelBar {
      display: flex;
      .formLabel {
        flex: 1;
      }
    }
    .childField {
      display: flex;
      .childFieldInput {
        flex: 1;
        margin-right: 8px;
      }
      .childLabel {
        width: 32px;
      }
    }
  }
}
</style>

